<template>
  <div class="containter">
    <div class="step">
      <ol class="titt">
        <el-badge
          :value="item.num"
          :max="99"
          :hidden="item.num == 0"
          class="item tittItem"
          v-for="(item, index) in list"
          :key="index"
        >
          <el-button
            class="button"
            size="mini"
            :class="activeIndex == index ? 'cur' : ''"
            :disabled="item.num == 0"
            @click="goAssignBlock('panelRef' + index, 100, index)"
          >{{ item.text }}</el-button>
        </el-badge>
      </ol>
    </div>
    <div
      ref="panelRef0"
      class="basicInfo"
    >
      <p class="title"><span>纳税资质</span></p>
      <el-table
        :data="qualificationData"
        style="width: 100%"
        v-loading="loadingQualification"
        max-height="240"
        :header-cell-style="{ background: '#f2f9fe' }"
        empty-text="暂无查看权限"
      >
        <el-table-column
          prop="qymc"
          label="企业名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="shtyxydm"
          label="纳税人识别号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="taxType"
          label="纳税人资质"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="startDate"
          label="发证日期"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="endDate"
          label="到期日期"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="taxAuthority"
          label="税务机关"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <div
      ref="panelRef1"
      class="basicInfo"
    >
      <p class="title">
        <span>A级纳税人</span><span class="glqyTwo">查看更多信息>></span>
      </p>
      <el-table
        :data="taxData"
        style="width: 100%"
        v-loading="loading1"
        max-height="240"
        :header-cell-style="{ background: '#f2f9fe' }"
        empty-text="暂无查看权限"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="XYDJ"
          label="纳税信用等级"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="PDSJ"
          label="评价年度"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <!-- 增值税信息 -->
    <div
      ref="panelRef4"
      class="basicInfo"
    >
      <p class="title"><span>增值税信息</span><span class="glqyTwo">查看更多信息>></span></p>
      <el-table
        :data="taxData"
        style="width: 100%"
        max-height="240"
        :header-cell-style="{background:'#f2f9fe'}"
        empty-text="暂无查看权限"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="zzsynse"
          label="应纳税额"
          align="center"
        >
        <template slot-scope="scope">
              <span v-show="isTm">{{ deseHandler(scope.row.zzsynse) }}</span>
              <span v-show="!isTm">{{ scope.row.zzsynse }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="zzssjse"
          label="实纳税额"
          align="center"
        >
        <template slot-scope="scope">
              <span v-show="isTm">{{ deseHandler(scope.row.zzssjse) }}</span>
              <span v-show="!isTm">{{ scope.row.zzssjse }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="zjyczcjsrq"
          label="纳税日期"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <!-- 企业所得税信息 -->
    <div
      ref="panelRef4"
      class="basicInfo"
    >
      <p class="title"><span>企业所得税信息</span><span class="glqyTwo">查看更多信息>></span></p>
      <el-table
        :data="taxData"
        style="width: 100%"
        max-height="240"
        :header-cell-style="{background:'#f2f9fe'}"
        empty-text="暂无查看权限"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="qysdsynse"
          label="应纳税额"
          align="center"
        >
        <template slot-scope="scope">
              <span v-show="isTm">{{ deseHandler(scope.row.qysdsynse) }}</span>
              <span v-show="!isTm">{{ scope.row.qysdsynse }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="qysdssjse"
          label="实纳税额"
          align="center"
        >
        <template slot-scope="scope">
              <span v-show="isTm">{{ deseHandler(scope.row.qysdssjse) }}</span>
              <span v-show="!isTm">{{ scope.row.qysdssjse }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="zjyczcjsrq"
          label="纳税日期"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <div
      ref="panelRef3"
      class="basicInfo"
    >
      <p class="title">
        <span>欠税信息</span><span class="glqyTwo">查看更多信息>></span>
      </p>
      <el-table
        :data="owingData"
        style="width: 100%"
        v-loading="loadingOwing"
        max-height="240"
        :header-cell-style="{ background: '#f2f9fe' }"
        empty-text="暂无查看权限"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="qssz"
          label="欠税税种"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="qsje"
          label="欠税金额"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="qsjessqssj"
          label="欠税金额所属起始时间"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { nszz, payTaxes, taxIllegal, qsxx } from '@/api/portay'
export default {
  props: ['comInfo'],
  data() {
    return {
      activeIndex: 'a',
      list: [
        { text: '纳税资质', disabled: false },
        { text: 'A级纳税人', disabled: false },
        { text: '增值税信息', disabled: false },
        { text: '企业所得税信息', disabled: false },
        { text: '欠税信息', disabled: false },
      ],
      qualificationData: [],
      taxData: [],
      zdData: [],
      pagination1: {
        page: 1,
        total: 0,
      },
      taxMoreData: [],
      pagination2: {
        page: 1,
        total: 0,
      },
      zdMoreData: [],
      paginationOwing: {
        page: 1,
        total: 0,
      },
      owingData: [],
      owingMoreData: [],
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisibleOwing: false,
      loading1: false,
      loading2: false,
      loadingQualification: false,
      loadingOwing: false,
    }
  },
  created() {},
  watch: {
    comInfo: {
      handler(newVal, oldVal) {
        if (newVal.shtyxydm) {
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  created() {
    this.getDict()
  },
  methods: {
    async getDict() {
      const dataSQQD = await this.$store.dispatch('asyncApi/getDict', {
        code: 'zxgslxr',
      })
      this.open(dataSQQD[0].value)
    },
    open(e) {
      this.$alert(
        `您当前暂无相关内容查看权限，\n如需开通权限请及时联系淄博征信有限公司:${e}`,
        '提示',
        {
          confirmButtonText: '关闭',
          center: true,
          dangerouslyUseHTMLString: true,
          callback: (action) => {},
        }
      )
    },
    // 点击导航栏，滚动条移动到内容所对应的位置
    goAssignBlock(el, speed, index) {
      this.activeIndex = index
      let windowH = window.innerHeight //浏览器窗口高度
      let h = this.$refs[el].offsetHeight //模块内容高度

      let t = this.$refs[el].offsetTop //模块相对于内容顶部的距离
      let top = t - (windowH - h) / 2 //需要滚动到的位置，若改为 t 则滚动到模块顶部位置，此处是滚动到模块相对于窗口垂直居中的位置
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop //滚动条距离顶部高度
      let currentTop = scrollTop //默认滚动位置为当前滚动条位置，若改为0，则每次都会从顶部滚动到指定位置
      let requestId
      //采用requestAnimationFrame，平滑动画
      function step() {
        //判断让滚动条向上滚还是向下滚
        if (scrollTop < top) {
          if (currentTop <= top) {
            //   window.scrollTo(x,y) y为上下滚动位置
            window.scrollTo(0, currentTop)
            requestId = window.requestAnimationFrame(step)
          } else {
            window.cancelAnimationFrame(requestId)
          }
          //向下滚动
          currentTop += speed
        } else {
          if (top <= currentTop) {
            //注：此处 - speed 是解决居中时存在的问题，可自行设置或去掉
            window.scrollTo(0, currentTop - speed)
            requestId = window.requestAnimationFrame(step)
          } else {
            window.cancelAnimationFrame(requestId)
          }
          //向上滚动
          currentTop -= speed
        }
      }
      window.requestAnimationFrame(step)
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
.containter {
  width: 100%;
  .step {
    ol.titt {
      // height: 160px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      margin: 0;
      padding: 0;
      font-size: 14px;
      position: fixed;
      top: 350px;
      right: 24px;
      z-index: 999;
    }
    .tittItem {
      margin-bottom: 10px;
    }
    ol.titt .button {
      width: 150px;
      margin: 0;
    }
    ol.titt .button.cur {
      background-color: #5591f5;
      color: #fff;
    }
  }
  .basicInfo {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    padding: 12px 174px 12px 24px;
    margin-top: 20px;
    p {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.title {
  font-size: 18px;
  font-weight: 900;
}
.glqy {
  color: #4a8bf6;
  margin-left: 24px;
}
.glqy:hover {
  cursor: pointer;
}
.glqyTwo {
  color: #ccc;
}
.glqyTwo:hover {
  cursor: pointer;
}
.item {
  margin-top: 4px;
  margin-right: 16px;
}
</style>
<style>
.dialog {
  border-radius: 10px;
  padding-bottom: 50px;
}
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*height:600px;*/
  max-height: calc(100% - 200px);
  max-width: calc(100% - 30px);
}
.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
.pagination {
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>